<template>
	<div class="content actRedBox">
		<div class="searchBox">
			<span class="searchText">活动主题:</span><input type="text" class="searchInput" placeholder="请输入活动主题" v-model="activityTheme">
			<span class="searchText">活动场景:</span>
			<select class="searchInput" v-model="activityScene">
				<option value="">请选择活动场景</option>
				<option value="994001">注册</option>
				<option value="994002">充值</option>
				<option value="994003">充电</option>
				<option value="994004">页面</option>
				<!-- <option value="994005">分享</option> -->
			</select>
			<span class="searchText">开始时间区间:</span>
			<el-date-picker v-model="time" type="datetimerange" :picker-options="pickerOptions" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
			</el-date-picker>
			<div class="searchBut" @click="searchRedList"><img src="../../assets/search.png" class="foundPic"/>搜索</div>
		</div>
		<div class="tableBox">
			<div class="playBox"></div>
			<div class="contentTable">
				<div v-if="searchType == 1">
					<img src="~_assets/fail.png" class="searchResult">
				</div>
				<div v-else-if="searchType == 2">
					<img src="~_assets/nosearch.png" class="searchResult">
				</div>
				<bootstrap-table v-else :my_columns="my_columns" :my_data="data1" :my_options="my_options" @item="getItem" ref="table1"></bootstrap-table>
			</div>
		</div>
		<div v-if="showRedDrawCount">
			<RedDrawCount @closeRedDrawCount='closeRedDrawCount' :showTittle="alertFlag" :items="trData"></RedDrawCount>
		</div>
		<div v-if="showRedUseMoney">
			<RedUseMoney @closeRedUseMoney='closeRedUseMoney' :items="trData"></RedUseMoney>
		</div>
		<div v-if="showRedNotUseMoney">
			<RedNotUseMoney @closeRedNotUseMoney='closeRedNotUseMoney' :items="trData"></RedNotUseMoney>
		</div>
	</div>
</template>

<script>
import { time } from "_config/common.js";
import RedDrawCount from "./children/RedDrawCount";
import RedUseMoney from "./children/RedUseMoney";
import RedNotUseMoney from "./children/RedNotUseMoney";
import { GET_ACTIVITY_STATISTIC_BY_RED } from "@/config/url";
export default {
  components: {
    RedDrawCount,
    RedUseMoney,
    RedNotUseMoney
  },
  mounted() {
    this.searchRedList();
    $(".contentTable").on("click", ".redDrawCount", this.redDrawCount);
    $(".contentTable").on("click", ".redUseMoney", this.redUseMoney);
    $(".contentTable").on("click", ".redNotUseMoney", this.redNotUseMoney);
  },
  data() {
    return {
      searchType: "12",
      pickerOptions: time,
      activityTheme: "", //活动主题
      activityScene: "", //活动场景
      time: "", //时间区间
      showRedDrawCount: false,
      showRedUseMoney: false,
      showRedNotUseMoney: false,
      alertFlag: "",
      trData: "",
      page: 1,
      size: 10,
      my_columns: [
        {
          title: "序号",
          field: "",
          formatter: function(value, row, index) {
            return index + 1;
          }
        },
        {
          title: "活动场景",
          field: "activity_scenes",
          formatter: function(value, row, index) {
            if (value == 994001 || value == "994001") {
              value = "注册";
            } else if (value == 994002 || value == "994002") {
              value = "充值";
            } else if (value == 994003 || value == "994003") {
              value = "充电";
            } else if (value == 994004 || value == "994004") {
              value = "页面";
            } else if (value == 994005 || value == "994005") {
              value = "分享";
            } else {
              value = "";
            }
            return value;
          }
        },
        {
          title: "活动主题",
          field: "activity_theme",
          formatter: function(value, row, index) {
            return value;
          }
        },
        {
          title: "领取数量",
          field: "receive_count",
          formatter: function(value, row, index) {
            return `<span class="underline redDrawCount" data-play="1">${value}</span>`;
          }
        },
        {
          title: "领取金额",
          field: "money",
          formatter: function(value, row, index) {
            return `<span class="underline redDrawCount" data-play="2">${value}</span>`;
          }
        },
        {
          title: "使用金额",
          field: "used_money",
          formatter: function(value, row, index) {
            return `<span class="underline redUseMoney">${value}</span>`;
          }
        },
        {
          title: "未使用金额",
          field: "unused_money",
          formatter: function(value, row, index) {
            return `<span class="underline redNotUseMoney">${value}</span>`;
          }
        },
        {
          title: "过期金额",
          field: "overdue",
          formatter: function(value, row, index) {
            return `<span class="underline redDrawCount" data-play="3">${value}</span>`;
          }
        },
        {
          title: "开始时间",
          field: "start_time",
          sortable: true
        },
        {
          title: "结束时间",
          field: "end_time",
          sortable: true
        }
      ],
      data1: [],
      my_options: {
        pagination: true
        // sidePagination:'server'
      },
      config: {
        checkbox_rows: true,
        rows_selectable: true,
        card_title: "Vue Bootsrap 4 advanced table"
      }
    };
  },
  methods: {
    getItem(data) {
      console.log(data);
      this.trData = data;
    },
    redDrawCount(e) {
      this.showRedDrawCount = true;
      e.stopPropagation();
      this.alertFlag = $(e.target).attr("data-play");
    },
    closeRedDrawCount() {
      this.showRedDrawCount = false;
    },
    redUseMoney() {
      this.showRedUseMoney = true;
    },
    closeRedUseMoney() {
      this.showRedUseMoney = false;
    },
    redNotUseMoney() {
      this.showRedNotUseMoney = true;
    },
    closeRedNotUseMoney() {
      this.showRedNotUseMoney = false;
    },
    searchRedList() {
      this.my_options = {
        pagination: true,
        sidePagination: "server",
        url: GET_ACTIVITY_STATISTIC_BY_RED,
        queryParams: this.getParams
      };
    },
    getParams() {
      let startTime;
      let endTime;
      if (this.time == "" || this.time == null || this.time == undefined) {
        startTime = "";
        endTime = "";
      } else {
        startTime = this.moment(this.time[0]).format("YYYY-MM-DD HH:mm:ss");
        endTime = this.moment(this.time[1]).format("YYYY-MM-DD HH:mm:ss");
      }
      let param = {
        activityTheme: this.activityTheme,
        activityScene: this.activityScene,
        startTime: startTime,
        endTime: endTime,
        page: this.$refs.table1.local.options.pageNumber,
        size: this.$refs.table1.local.options.pageSize
      };
      return param;
    }
  }
};
</script>

<style lang="less">
.actRedBox{
  .el-input__inner {
  height: 0.18rem;
  border-radius: 8px;
  padding-left: 0.08rem;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(181, 194, 202, 1);
  margin-right: 0.2rem;
  margin-left: 0.04rem;
}
.contentTable {
  width: 99%;
}
.contentTable {
  width: 99%;
}

.bootstrap-table {
  padding-top: 0;
}
.underline{
    cursor: pointer;
  }
}

</style>